import React from 'react';
import selfStyle from './style.styl';
import style from '../peer/style.styl';
import {ScrollMenu,ScrollTitle, ScrollBox,AutosaveTextarea,success,error, Button, Modal, Select} from '../../../../ui-components';
import { Avatar, IconButton } from 'sq-ui';
import cx from 'classnames';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../../../actions/review.action' 

import SelfProjectItem from './SelfProjectItem';
import OtherContent from '../peer/OtherContent';
import ReviewHeader from '../tool/ReviewHeader';
import {buildText} from '../tool/util';
import ReactTooltip from 'react-tooltip'

@connect(({ app, review }) => ({ app, review }), dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class SelfReport extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'SelfReport';
    this.state = {
      reviewerState: [],
      refuseInvitationShow: false,
      score: 0,
    }
  }
  componentDidMount() {
    const {
      itemId
    } = this.props.routeParams;
    const {
      isAdmin
    } = this.props;
    this.props.actions.fetchReviewItem(itemId, isAdmin ? 'reports' : 'activities'); 
  }
  componentWillReceiveProps(nextProps) {
    const {
      reviewItem
    } = this.props.review;
    this.setState({
      score: reviewItem.score || 0
    });
  }
  
  goBack = () => {
    const {
      reviewItem,
    } = this.props.review;
    const {
      isAdmin
    } = this.props;
    if(isAdmin)
      this.context.router.push(`/review/admin/${(reviewItem.reviewTemplate||{}).templateId}/report`);
    else
      this.context.router.push(`/review/index/${(reviewItem.reviewTemplate||{}).templateId}`);
  }
  render() {
    const {
      reviewItem,
      reviewItemProjects,
    } = this.props.review;
    const {
      isAdmin
    } = this.props;
    const {
      invitationDisplayType,
      projects = [],
      questions = [],
      revieweeUserProfile,
      activityId: invitationId,
      isManager,
    } = reviewItem;
    if(!invitationId) return null;
    return (
      <div>
        <ReviewHeader title={reviewItem.revieweeUserProfile ? `${reviewItem.revieweeUserProfile.fullName}的反馈报告` : ''} goBack={this.goBack}  />
        <ScrollMenu>
          {
            !reviewItemProjects.length ? null : <ScrollTitle name={'ScrollTitle'} title={'按项目反馈'} />
          }
          {
            reviewItemProjects.map((v, i) => {
              return (
                <ScrollBox key={`q_${i}`} title={v.name}>
                  <div className={style['peer-box']} style={{paddingTop: '1px'}} style={{paddingTop:'1px'}}>
                    <SelfProjectItem  id={invitationId} index={i} actions={this.props.actions}  viewMode={isAdmin ? 'reports' : 'activities'}  item={v} user={revieweeUserProfile} isManager disabled/>
                  </div> 
                </ScrollBox>
              );
            })
          }
          {
            !questions.length ? null : <ScrollTitle name={'ScrollTitle'} title={'通用问题'} />
          }
          {
            questions.map((v, i) => {
              return (
                <ScrollBox key={`q_${i}`} title={v.name}>
                  <div className={style['peer-box']} >
                    <div >
                      <div style={{paddingBottom: 0}}>
                        <div className={selfStyle['question-title']}>{v.name}</div>
                        <div className={selfStyle['avatar-box']}>
                          <Avatar
                            style={{ margin: '0 10px 0 0' }}
                            width={30}
                            src={revieweeUserProfile.avatarUrl}
                          />
                          <div className={selfStyle['avatar-name']}>
                            {revieweeUserProfile.fullName}的自评
                          </div>
                        </div>
                        <div className={selfStyle['question-text']}>
                          {buildText((v.revieweeComment||{}).content||'暂未填写')}
                        </div>
                      </div>
                    </div>
                    <OtherContent list={v.submittedComment||[]} />
                  </div>
                </ScrollBox>
              );
            })
          }
        </ScrollMenu>
        <div className={style['peer-box']} style={{width: '850px'}}>
          <div className={style['peer-score']}>
            <label>主管评分</label>
            <p >{`${(reviewItem.score||0)/100 || '尚未评'}分`}
              <div data-tip data-for='global' className={style['tooltip']}> ?
                <ReactTooltip id='global' aria-haspopup='true' role='example'>
                 <p>5分 - 表现优异,远超预期</p>
                 <p>4分 - 表现初测,超出预期</p>
                 <p>3分 - 表现很好,符合预期</p>
                 <p>2分 -表现低于预期</p>
                 <p>1分 -不合格</p>
                </ReactTooltip>
              </div>
            </p>
          </div>
        </div>
      </div>
    );
  }
}

export default SelfReport;
